<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <div class="xbox">
      <p>段落1</p>
      <p class="p2">段落2</p>
      <p>段落3</p>
    </div>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
  </div>
</body>
<script>

  // 关系选择
  var xbox = document.querySelector(".xbox");

  // 父选所有子元素
  var child = xbox.children;
  console.log( child );
  // 父选第一个子元素
  var fChild = xbox.firstElementChild;
  console.log( fChild );
  // 父选最后一个子元素
  var lChild = xbox.lastElementChild;
  console.log( lChild );
  // 子选父元素
  var parent = xbox.parentNode;
  console.log( parent );
  // 上一个兄弟元素
  var prev = xbox.previousElementSibling;
  console.log( prev );
  // 下一个兄弟元素
  var next = xbox.nextElementSibling;
  console.log( next );

</script>
</html>